<template>
  <div v-loading="loading">
    <el-card class="m-4 p-4 space-y-4">
      <div class="space-y-4">
        <span class="text-2xl">配置首页的视频</span>
        <el-upload class="w-1/2" ref="upload" :limit="1" :action="uploadVideo" list-type="picture"
          :on-change="handlePictureCardPreview" :on-remove="handleRemove" :auto-upload="false" :show-file-list="false"
          :file-list="fileList" multiple :on-progress="onProgress" :on-success="onSuccess" :on-error="onError">
          <el-button style="margin-right: 20px;" slot="trigger" type="primary">上传视频文件</el-button>
          <el-button slot="tip" @click="saveClick">保存</el-button>
        </el-upload>
        <video class="w-1/2" ref="videoPlayer" :src="videoUrl" controls lazy></video>
      </div>
    </el-card>
    <el-card class="m-4 p-4">
      <div class="space-y-4">
        <span class="text-2xl">配置首页的图片</span>
        <div class="flex space-x-1 w-full">
          <div class="w-1/4 bg-red-500" style="height:300px" v-for="item, index in fileImages" :key="index">
            <el-upload ref="upload" :limit="1" :action="uploadImage" list-type="picture"
              :on-remove="handleRemove" :show-file-list="false" multiple :on-success="onSuccess_image"
              :data="{ id: index + 1 }">
              <div>
                <el-image style="height:300px" :src="'https://mamatata1.oss-cn-shanghai.aliyuncs.com/'+item.scr_url" fit="cover" lazy>
                  <div slot="placeholder">
                    加载中...
                  </div>
                </el-image>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { deleteImage, getVideo, getImage } from "./index.api";
export default {
  data() {
    return {
      uploadVideo: process.env.VUE_APP_BASE_API + "/magic/api/home/uploadVideoTest", // 上传的视频服务器地址
      uploadImage: process.env.VUE_APP_BASE_API + "/magic/api/home/uploadImages",
      headers: {
        Authorization: "Bearer " + getToken()
      },
      fileList: [],
      fileImages: [],
      dialogVisible: false,
      videoUrl: '',
      loading: false,
    };
  },
  mounted() {
    this.getVideoPage()
    this.getImagePage()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file, fileList) {
      this.fileList = fileList;
      this.videoUrl = file.url
    },
    //获取视图上的视频
    getVideoPage() {
      getVideo().then(res => {
        console.log(res);
        if (res.message = "success") {
          this.videoUrl = res.data.video_url
        }
      })
    },
    getImagePage() {
      getImage().then(res => {
        console.log(res);
        if (res.message = "success") {
          this.fileImages = res.data.image_url
        }
      })
    },
    //保存视频
    saveClick() {
      if (this.fileList.length == 0) {
        this.$notify({
          title: '提示',
          message: '请上传您的视频',
          duration: 2000,
          type: 'warning'
        });
        return
      }
      // 上传图片-存在 阿里oss 
      this.$refs.upload.submit();
    },

    //正在上传的方法
    onProgress() {
      this.loading = true; // 开始上传中状态
    },
    //文件上传成功
    onSuccess() {
      this.loading = false;
      this.$notify({
        title: '提示',
        message: '上传视频成功！',
        duration: 2000,
        type: 'success'
      });
    },
    //文件上传失败
    onError() {
      this.loading = false;
      this.$notify({
        title: '提示',
        message: '上传失败！！！',
        duration: 2000,
        type: 'error'
      });
    },
    //图片上传成功
    onSuccess_image() {
      this.getImagePage()
    },

    //删除按钮
    deleteClick() {
      console.log(this.fileList);
      if (this.fileList) {
        this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        });
        return
      }
      var params = {
        imageName: "2024/AUGUST/5/16/5/046b952e-33e0-4310-b794-fab2492e41dd.png"
      }
      deleteImage(params).then(res => {
        console.log(res);

      })
    },
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>